<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
<link href="/user/css/style.css" rel="stylesheet" type="text/css" />
<script src="/user/js/jquery.js"></script>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>图文编辑-会员中心</title>
</head>
<body class="body">
<div class="main">
<div class="editzl">
	<header id="header">
	<section class="head-b head-b1">
		<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"/></a></span>
		<h1 id="t0">图文编辑</h1>
		<div class="u-right" href="#">
			<a href="/" class="hSearch right"><img src="/skin/img/i_home.png"/></a>
		</div>
	</section>
</header>
{if($ninfo)}
<form class="infoadd" style="min-height:100vh; background:#fff;">
  <input type="hidden" value="{$list[Id]}" name="id" />
  <p class="p1" style="text-align:center;">
    <input type="text" name="title" placeholder="请输入标题 20字以内" value="{$ninfo[title]}" style="width:90%; height:38px; line-height:38px; border:1px solid #ddd; text-indent:10px;" />
  </p>
  <p style="text-align:left; padding-left:5%;">
    <select class='menu2' name='menu2' style="width:60%; height:38px; line-height:38px; border:1px solid #ddd; text-indent:10px;">
      <option value='0'>--选择栏目--</option>
      {loop $menu $key as $list}
      <option {if($ninfo['cid']==$list['Id'])} selected {/if} value="{$list[Id]}">{$list[name]}</option>
      {/loop}
    </select></p>
    <div id='tab3' class='hide uppic' style="margin-bottom:20px; padding:0 0 0 5%;">
      <div class="gerenUpload" style="width:29%; aspect-ratio: 3 / 3; border:1px solid #ddd;position: relative; margin-right:1%;">
        <input type="file" id="upload" name="" data-name="1" class="sc" />
        <input type="hidden" id="img1" name="img[]" />
        <img src="/skin/img/mr.png" alt="" id="moren1">
        <a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
      </div>		
      <div class="gerenUploadMore"  style="width:29%; aspect-ratio: 3 / 3; border:1px solid #ddd;position: relative; margin-right:1%;">

      </div>
      <div style="clear:both;"></div>		
    </div>
  <div class="p2" style="text-align:center;"><textarea name="content" style="width:90%; box-sizing:border-box; height:100px; margin:0 auto; padding:5px; line-height:24px; font-size:14px; border:1px solid #ddd;" placeholder="请输入分享文字 100字以内">{$ninfo[content]}</textarea></div>		
  <button type="button" class="newadd">确认添加</button>
</form>
<script src="./js/jquery.js"></script>
<script>
  $(".newadd").on("click",function(){
     var msg = confirm('确认提交图文信息？');
     if(msg==true){
      $.ajax({
        type:"post",
        dataType:"json",
        url:"/Moudelu.php?m=m&a=newsadd",
        data:$(".infoadd").serialize(),
        success:function(d){
          if(d[0]==0){
            alert(d[1]);
          }
          else{
            alert(d[1]);
            window.location.href='newslist.php';
          }
        }
      });
     }
  });
  
    $(".uppic").delegate(".del","click",function (e) {
    $(this).parent().remove();
    $(".gerenUploadMore").show();
  });
  $(".gerenUploadMore").click(function () {
    let i = $(".gerenUpload").length + 1;
    $(this).before(`<div class="gerenUpload" style="width:29%; aspect-ratio: 3 / 3; border:1px solid #ddd;position: relative; margin-right:1%;">
  \t\t\t\t\t<input type="file" id="upload" name="" data-name="${i}" class="sc" />
  \t\t\t\t\t<input type="hidden" id="img${i}" name="img[]" />
  \t\t\t\t\t<img src="/skin/img/mr.png" alt="" id="moren${i}">
  \t\t\t\t\t<a class='del' style='cursor:pointer; position:absolute; z-index:999; top:0; right:0; width:20px; height:20px; line-height:20px; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd;background:red; color:#fff; '>X</a>
  \t\t\t\t</div>`)
    if (i == 9) {
      $(this).hide();
    }
  });
  const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];
  const MAXSIZE = 1024 * 1024 * 2;
  const MAXSIZE_STR = '2MB';

  function convertImageToBase64(file,callback) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.addEventListener('load', function(e){
      const base64Image = e.target.result;
      callback && callback(base64Image);
      reader = null;
    })
  }
  // 图片压缩
  function compress(base64Image,callback){
    let maxW = 640;
    let maxH = 640;
    const image = new Image();
    image.addEventListener('load', function(e){
      let ratio; //图片的压缩比
      let needCompress = false; // 是否需要压缩
      if(maxW < image.naturalWidth) {
        needCompress = true;
        ratio = image.naturalWidth / maxW;
        maxH = image.naturalHeight / ratio;
      }
      //经过处理后，实际图片的尺寸为1024 * 640;
      if(maxH < image.naturalHeight) {
        needCompress = true;
        ratio = image.naturalHeight / maxH;
        maxW = image.naturalWidth / ratio;
      }
      if(!compress) {
        maxW = image.naturalWidth;
        maxH = image.naturalHeight;
      }//如果不需要压缩，需要获取图片的实际尺寸

      const canvas = document.createElement('canvas');
      canvas.setAttribute('id','__compress__');
      canvas.width = maxW;
      canvas.height = maxH;
      canvas.style.visibility = 'hidden';
      // document.body.appendChild(canvas);

      const ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,maxW,maxH);
      ctx.drawImage(image, 0, 0, maxW, maxH);
      // toDataURL的第二个参数表示图片质量，取值为0-1 1为原图
      const compressImage = canvas.toDataURL('image/jpeg', 0.5);
      callback && callback(compressImage);

      //在页面上展示压缩后的图片
    });
    image.src = base64Image;
    // document.body.appendChild(image);

  }
  //获得压缩后的base64
  function uploadToServer(compressImage) {
    //这里调用上传图片base64编码的接口
    compressImage = encodeURIComponent(compressImage);
    $.ajax({
      type:"post",
      dataType:"json",
      url:"/Moudelu.php?m=m&a=upload",
      data:"img="+compressImage,
      success:function(d){
        if(d[0]==0){
          alert(d[1]);
        }
        else{           
    pare.children("input[type=hidden]").attr('value',d[1]);
    pare.children("img").attr('src',d[1]);
        }
      }
    });
  }

  const upload = document.getElementById('upload');
var uploadS = document.getElementsByClassName("sc");

$(".uppic").delegate(".sc","click",function (e) {
  var changeExed = false;
  pare = $(this).parent(".gerenUpload");
  
  $(this).change(function (e) {
    if (!changeExed) {
      changeExed = true;
      type = 1;
      const [file] = e.target.files;
      if(!file) {
        return;
      }
      const { type: fileType, size: fileSize } = file;
      //图片支持类型检查
      if(!ACCEPT.includes(fileType)) {
        alert(`不支持[${fileType}]文件类型!`);
        upload.value = '';
        return;
      }
      //图片容量检查
      if(fileSize > MAXSIZE) {
        alert(`文件大小超出${MAXSIZE_STR}!`);
        upload.value = '';
        return;
      }
      //压缩图片
      
      convertImageToBase64(file, (base64Image) => compress(base64Image,uploadToServer));
    }
  });
});
</script>
{else}
<p class="none">未查询到分享信息</p>
{/if}
{include(foot)}
</body>
</html>